<script setup lang="ts">
const props = defineProps({
  backgroundColor: {
    type: String,
    default: "#ffffff",
  },
  title: {
    type: String,
    default: "卓速采",
  },
})
console.log(props)

const emit = defineEmits(['view'])

const view = () => {
  emit('view')
}
</script>

<template>
  <div class="specialized-container" :style="{ background: backgroundColor }">
    <div class="container">
      <div class="specialized-container-header flex pt-[80px] items-center justify-center gap-[24px]">
        <div class="left-flag"></div>
        <div class="title">{{ title }}</div>
        <div class="right-flag"></div>

        <div class="view-more flex items-center justify-center cursor-pointer gap-[10px]" @click="view">
          <p class="font m-[0]">查看更多</p> <img class="w-[22px] h-[22px]" src="../assets/image/view.png" alt=""/>
        </div>
      </div>
      <div class="py-[70px]">
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.specialized-container {
  width: 100%;

  &-header {
    position: relative;
    height: 30px;

    .view-more {
      position: absolute;
      right: 0;

      .font {
        user-select: none;
        width: 80px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0em;
        font-feature-settings: "kern" on;
        /* 蓝色 */
        color: #0973CA;
      }
    }

    .left-flag {
      width: 265px;
      height: 30px;
      transform: rotate(180deg);
      opacity: 1;
      background: linear-gradient(270deg, rgba(38, 91, 232, 0) 0%, rgba(33, 114, 186, 0.2) 100%);
    }


    .right-flag {
      width: 265px;
      height: 30px;
      opacity: 1;
      background: linear-gradient(270deg, rgba(33, 114, 186, 0) 0%, rgba(33, 114, 186, 0.2) 100%);
    }

    .title{
      font-size: 30px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;
      font-feature-settings: "kern" on;
      color: #3D3D3D;
    }
  }

  .content{
    height: 100%;
    border-radius: 10px;
    opacity: 1;
    //background: linear-gradient(180deg, #D0E7FA 0%, #F6FAFF 100%);
  }
}
</style>
